<template>
  <div class="pad-content-box form-no-padding-box padding-top-20">
    <el-form label-width="130px" size="small" :model="searchParams">
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="合同编号" prop="likeContractCode">
            <el-input v-model="searchParams.likeContractCode" placeholder="请输入" clearable></el-input>
              <!-- <el-select v-model="searchParams.likeContractCode"  filterable placeholder="请选择">
                <el-option v-for="item in agreementList" :key="item.contractCode" :label="item.contractCode" :value="item.contractCode"></el-option>
              </el-select> -->
            </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="租户" prop="likeCustomerName">
            <el-input v-model="searchParams.likeCustomerName" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="收入单号" prop="likeBillCode">
            <el-input v-model="searchParams.likeBillCode" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="状态" prop="confirmStatus">
            <el-select v-model="searchParams.confirmStatus"  placeholder="请选择" clearable>
              <el-option v-for="item in statusList" :key="item.key" :label="item.value" :value="item.key"></el-option>
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="公司" prop="likeEnterpriseName">
            <el-input v-model="searchParams.likeEnterpriseName" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="6">
          <el-form-item label="品牌名称" prop="likeOperateBrandName">
            <el-input v-model="searchParams.likeOperateBrandName" placeholder="请输入" clearable></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="收入所属年月" prop="belongDate">
            <el-date-picker 
              v-model="searchParams.belongDate" 
              value-format="timestamp"
              placeholder="请选择"
              type="daterange"
              range-separator="至"
              start-placeholder="开始日期"
              end-placeholder="结束日期"> 
            </el-date-picker>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row :gutter="20">
        <el-col :span="6">
          <el-form-item label="费项名称" prop="billTypeList">
            <el-select v-model="searchParams.billTypeList"  clearable filterable multiple :collapse-tags="true" >
              <el-option v-for="item in chargeList" :key="item.key" :label="item.value" :value="item.key" />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-col :span="24">
        <el-button type="primary" size="small" class="f-right" @click="getPaymentList">查询</el-button>
        <el-button type="primary" size="small"  class="f-right margin-right-10" @click="getQuery">合同收入明细查询</el-button>
        <el-button type="primary" size="small"  class="f-right" @click="getSure">收入确认</el-button>
        <el-button type="primary" size="small"   class="f-right" @click="out()">Excel导出</el-button>
      </el-col>
    </el-form>
    <el-table class="margin-top-20 has-tab-header-border new-table-style bold-scrollbar-table" :border="true"  :data="tableData" ref="multipleTable"  @select-all="onSelectAll" @selection-change="handleSelectionChange">
      <el-table-column  type="selection" width="55"> </el-table-column>
      <el-table-column  label="收入单号" prop="billCode" width="140"> </el-table-column>
      <el-table-column  label="收入状态" prop="confirmStatus" width="90"> 
        <template slot-scope="scope">
          <span>{{ scope.row.confirmStatus==1?'已确认':'未确认' }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="合同编号" prop="contractCode" width="140"> </el-table-column>
      <el-table-column  label="公司" prop="chargeItemName" width="140"> </el-table-column>
      <el-table-column  label="租户" prop="customerName" width="160"> </el-table-column>
      <el-table-column  label="品牌" prop="operateBrandName" width="80"> </el-table-column>
      <el-table-column  label="资产简码" prop="assetName" width="100"> </el-table-column>
      <el-table-column  label="费项名称" prop="billTypeName" width="100"> </el-table-column>
      <el-table-column  label="总金额" prop="amountReceivable" width="90"> </el-table-column>
      <el-table-column  label="收入金额" prop="incomeAmount" width="90"> </el-table-column>
      <el-table-column  label="税额" prop="taxAmount" width="90"> </el-table-column>
      <el-table-column  label="收入起始日期" width="120" prop="cycleStartTime">
        <template slot-scope="scope">
          <span>{{ scope.row.cycleStartTime | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="收入截止日期" width="120" prop="cycleEndTime">
        <template slot-scope="scope">
          <span>{{ scope.row.cycleEndTime | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="收入所属年" prop="belongDate" width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.belongDate | formatDateTime('YYYY') }}年</span>
        </template>
      </el-table-column>
      <el-table-column  label="收入所属月" prop="belongDate" width="110">
        <template slot-scope="scope">
          <span>{{ scope.row.belongDate | formatDateTime('MM') }}月</span>
        </template>
      </el-table-column>
      <el-table-column  label="确认人" prop="confirmUserName" width="100"> </el-table-column>
      <el-table-column  label="确认日期" width="120" prop="confirmDate">
        <template slot-scope="scope">
          <span>{{ scope.row.confirmDate | formatDateTime('YYYY-MM-DD') }}</span>
        </template>
      </el-table-column>
      <el-table-column  label="说明" prop="description" width="150"> </el-table-column>
    </el-table>
    <Pagination v-if="total" @change="pageChange" :total="total" paginationLayout="total, prev, pager, next"/>
    <el-dialog :visible.sync="showSureDialog" title="收入确认" width="50%" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="handleClose" >
      <contractSure @closeDialog="closeDialog" ref="saleReportAdd" :tableData="multipleTable" :primaryKey="primaryKey"></contractSure>
    </el-dialog>
    <el-dialog :visible.sync="showQueryDialog" title="合同收入明细查询" width="90%" :close-on-click-modal="false" :close-on-press-escape="false" :before-close="handleClose" >
      <contractQuery @closeDialog="closeDialog" ref="saleReportAdd" :tableData="multipleTable" :contractCode="contractCode" :customerName="customerName"></contractQuery>
    </el-dialog>
  </div>
</template>

<script>
  import {apiBusinessContractList,apiGatherList,apiGatherExport} from '../../api/gatherManage';
  import contractSure from './components/contractSure.vue';
  import contractQuery from './components/contractQuery.vue';
  import { apiPactConstant } from '@a/index';
  export default {
    name: 'salesReport',
    components:{contractSure,contractQuery},
    data() {
      return {
        paymentList:[],
        paymentLattersList:[],
        multipleTable:[],
        searchParams:{},
        tableData:[],
        currentPage: 1,
        pageSize: 10,
        total:0,
        showSureDialog:false,
        showQueryDialog:false,
        statusList:[
          {key:0,value:'未确认'},
          {key:1,value:'已确认'},
        ],
        agreementList:[],
        chargeList:[],
        primaryKey:'',
        customerName:'',
        contractCode:''
      };
    },
    created() {
      //  this.getAgreementList()
       this.getConstant()
       this.getPaymentList()
    },
    methods: {
      //合同列表
      async getAgreementList(){
        let res = await apiBusinessContractList({
          projectKeys: [localStorage.getItem('projectKey')],
          contractStatusList: [2, 4, 5],
          status:1,
          spaceCodeList:[]
        })
        this.agreementList = res.rows
      },
      //常量
      async getConstant(){
        let res = await apiPactConstant()
        this.chargeList = res.billType
      },
      onSelectAll() {
        this.$refs.multipleTable.clearSelection();
      },
      handleSelectionChange(rows){
        if (rows.length > 1) {
          const newRows = rows.filter((it, index) => {
            if (index == rows.length - 1) {
              this.$refs.multipleTable.toggleRowSelection(it, true);
              return true;
            } else {
              this.$refs.multipleTable.toggleRowSelection(it, false);
              return false;
            }
          });
        }
        this.multipleTable = rows
        if(this.multipleTable.length>0){
          this.primaryKey = this.multipleTable[0].primaryKey
          this.contractCode = this.multipleTable[0].contractCode
          this.customerName = this.multipleTable[0].customerName
        }else{
          this.primaryKey = ''
          this.contractCode = ''
          this.customerName = ''
        }
      },
      async getPaymentList(more){
        let res = await apiGatherList({
          currentPage: more ? this.currentPage : 1,
          pageSize: this.pageSize,
          ...this.searchParams,
          geBelongDate:this.searchParams.belongDate?this.searchParams.belongDate[0]:null,
          leBelongDate:this.searchParams.belongDate?this.searchParams.belongDate[1]:null,
          confirmStatusList:this.searchParams.confirmStatus>=0?[this.searchParams.confirmStatus]:null
        });
        this.tableData = res.rows || [];
        this.total = res.total || 0;
      },
      //分页
      pageChange(page) {
        this.currentPage = page.currentPage
        this.getPaymentList('more');
      },
      getQuery(){
        this.showQueryDialog = true
      },
      getSure(){
        if(this.multipleTable.length==0){
          this.$message.error('请选择账单！')
          return
        }
        this.showSureDialog = true
      },
      closeDialog(data){
        this.showSureDialog = false
        this.showQueryDialog = false
        if(data.success){
          this.getPaymentList()
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleClose(){
        this.$refs.saleReportAdd.closeDialog({success:false})
      },
       //导出
      async out() {
        let res = await apiGatherExport({
          ...this.searchParams,
          geBelongDate:this.searchParams.belongDate?this.searchParams.belongDate[0]:null,
          leBelongDate:this.searchParams.belongDate?this.searchParams.belongDate[1]:null,
          confirmStatusList:this.searchParams.confirmStatus>=0?[this.searchParams.confirmStatus]:null
        })
        window.location.href = res.url
      },
    },
  };
</script>

<style lang="scss" scoped>
  ::v-deep .has-tab-header-border .el-tabs__header {
    border: none;
  }
  ::v-deep .cell{
    text-align: center;
  }
</style>
